import { Button, Divider } from 'antd-mobile'
import type { HomeTrainerType } from '../../interface'
import styles from './index.module.less'

/** 待办作业卡片 */
const EvaluateCard = <T extends HomeTrainerType.Evaluate>(props: {
    item: T
    onClickItem?: (item: T) => any
}) => {
    const { item } = props

    return (
        <div className={styles.evaluateCard}>
            <div className={styles.evaluateCard_header}>{item.evaluate}</div>
            <div className={styles.evaluateCard_content}>{item.lesson || '暂无内容'}</div>

            <Divider />

            <div className={styles.evaluateCard_operation}>
                <div className={styles.evaluateCard_date}>{item.create_time}</div>
                <Button
                    color="primary"
                    shape="rounded"
                    size="small"
                    onClick={() => props.onClickItem?.(item)}
                >
                    去填写
                </Button>
            </div>
        </div>
    )
}

/** 待办作业列表 */
export const EvaluateList = <T extends HomeTrainerType.Evaluate>(props: {
    list: T[]
    emptyClass?: string
    onClickItem?: (item: T) => any
}) => {
    return (
        <>
            {props.list.length ? (
                props.list.map(item => {
                    return (
                        <EvaluateCard key={item.id} item={item} onClickItem={props.onClickItem} />
                    )
                })
            ) : (
                <span className={props.emptyClass}>暂无待办任务</span>
            )}
        </>
    )
}

export default EvaluateCard
